<template>
  <div class="global">
    <div class="globalhead">
      <div class="leftcard">
        <div class="shouye" @click="sy">首页</div>
      </div>
      <div class="centercard">智慧旅游可视化大数据平台</div>
      <div class="rightcard">
        <div class="rightbutton">统计报告</div>
        <div class="rightinfo">{{ time }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {useRouter} from "vue-router"
import { onMounted, ref } from "vue";
const time = ref("");
const router=useRouter();
const sy=()=>{
   router.push("/index1") 
}
// router.push("/index/index1")
const formatNum = (num) => {
  console.log(num);
  return num < 10 ? "0" + num : num;
  console.log("0" + num);
};
const getdata = () => {
  const date = new Date();
  const hour = date.getHours();
  const minute = formatNum(date.getMinutes());
  const seconds = formatNum(date.getSeconds());
  const day = formatNum(date.getDate());
  const year = date.getFullYear();
  const month = date.getMonth()+1;
  time.value = `${year} / ${month} / ${day} ${hour} : ${minute} : ${seconds}`; // "Sun Dec 17 1995"
  console.log(time.value)
};
onMounted(() => {
  setInterval(() => {
    getdata();
  }, 1000);
});
</script>
<style scoped>
.rightbutton {
  width: 150px;
  height: 100%;
  float: right;
  line-height: 40px;
  color: #29fcff;
  text-align: center;
  font-size: 20px;
  background: url("../assets/dataScreen-header-btn-bg-r.png") no-repeat;
  background-size: 100% 100%;
}
.rightinfo{
  line-height: 40px;
  color: #29fcff;
  font-size: 20px;
    
}
.rightcard {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background: url("../assets/dataScreen-header-right-bg.png") no-repeat;
  background-size: 100% 100%;
  padding-right: 15px;
  box-sizing: border-box;
}
.centercard {
  width: 40%;
  height: 74px;
  background: url("../assets/dataScreen-header-center-bg.png") no-repeat;
  background-size: 100% 100%;
  line-height: 74px;
  color: #29fcff;
  font-size: 30px;
  text-align: center;
}
.shouye {
  width: 150px;
  height: 100%;
  float: right;
  line-height: 40px;
  color: #29fcff;
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  background: url("../assets/dataScreen-header-btn-bg-l.png") no-repeat;
  background-size: 100% 100%;
}
.leftcard {
  width: 30%;
  height: 100%;
  background: url("../assets/dataScreen-header-left-bg.png") no-repeat;
  background-size: 100% 100%;
}
.globalhead {
  width: 100%;
  height: 40px;
  display: flex;
}
.global1 {
  width: 100%;
  height: 100%;
}
.global {
  width: 100vw;
  height: 100vh;
  background: url("../assets/bg.png") no-repeat;
  background-size: cover;
}
.top {
  width: 100px;
  height: 100px;
  background: hotpink;
  margin-left: 50px;
}

.bottom {
  width: 100px;
  height: 100px;
  background: skyblue;
  margin-left: 50px;
  margin-top: 100px;
}
</style>